<template>
	<view class="layout">
		<view>
			<view class="layout-close">
				<image class="layout-close-image" src="/static/images/user/icon_login_close.png" @click="goBack" mode=""></image>
			</view>
			<view class="layout-project">
				<image class="layout-project-logo" src="/static/logo.png"></image>
				<text class="layout-project-name">欢迎登录联联探客</text>
			</view>
			<view class="layout-box">
				<view class="layout-box-input">
					<text class="layout-box-input-area">+86</text>
					<view class="layout-box-input-line"></view>
					<input class="layout-box-input-class" v-model="phone" maxlength="11" type="number" placeholder="请输入手机号" />
					<image
						class="layout-box-input-clear"
						v-if="phone"
						src="/static/images/income/icon_sqtx_close.png"
						@click="phone = ''"
					></image>
				</view>
				<view class="layout-box-btn">
					<button
						:disabled="phone.length !== 11 || timer !== sendCodeTime"
						@click="toVerifyCode"
						:class="{ active: phone.length !== 11 || timer !== sendCodeTime }"
					>
						{{ timer === sendCodeTime ? '获取验证码' : `${timer}s后重新获取` }}
					</button>
				</view>
			</view>
		</view>
		<view class="layout-footer">
			<text>
				登录即同意
				<text class="layout-footer-bold" @click="toAgreement">《联联探客隐私协议》</text>
			</text>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
const webView = `${defaultImageUrl}webView/PlatformPrivacyAgreement.html`;
const sendCodeTime = 60;
export default {
	data() {
		return {
			phone: '',
			sendCodeTime,
			timer: sendCodeTime,
			Interval: null
		};
	},
	// 我的页面
	onLoad() {
		uni.$on('VerifyCode', (data) => {
			this.timer = data.timer;
			if (this.timer === 0) {
				this.timer = this.sendCodeTime;
				return;
			}
			this.Interval = setInterval(() => {
				this.timer -= 1;
				if (!this.timer) {
					this.timer = this.sendCodeTime;
					clearInterval(this.Interval);
				}
			}, 1000);
		});
	},
	onUnload() {
		uni.$off('VerifyCode');
		clearInterval(this.Interval);
	},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		toAgreement() {
			// 隐私协议
			const url = `/tandianPage/CommonWebView?webView=${webView}`;
			uni.navigateTo({
				url
			});
		},
		toVerifyCode() {
			const { phone, timer } = this;
			if (!/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone)) {
				uni.showToast({
					title: '手机号格式错误',
					icon: 'none'
				});
				return;
			}
			clearInterval(this.Interval);
			uni.navigateTo({
				url: `./VerifyCode?&phone=${phone}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	height: 100vh;
	@include Db_iosBottomDistance(40rpx);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #ffffff;

	&-close {
		padding-top: calc(var(--status-bar-height) + 24rpx);
		padding-left: 40rpx;
		&-image {
			width: 48rpx;
			height: 48rpx;
		}
	}
	&-project {
		margin-bottom: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&-logo {
			margin-bottom: 32rpx;
			width: 160rpx;
			height: 160rpx;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255, 145, 29, 0.53);
			border-radius: 48rpx;
		}
		&-name {
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}
	}
	&-box {
		padding: 0 48rpx;
		&-input {
			width: 100%;
			height: 40rpx;
			display: flex;
			align-items: center;
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid #eeeeee;
			&-area {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
			&-line {
				width: 2rpx;
				height: 24rpx;
				background: #cccccc;
				margin: 0 20rpx;
			}
			&-class {
				flex: 1;
				padding-left: 20rpx;
				font-size: 28rpx;
			}
			&-clear {
				width: 40rpx;
				height: 40rpx;
			}
		}
		&-btn {
			margin-top: 94rpx;
			line-height: 80rpx;

			button {
				@include Db_commonButton(80rpx, 24rpx);
			}
		}
	}
	&-footer {
		padding-bottom: 40rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;
		&-bold {
			color: #333333;
			text-decoration: underline;
		}
	}
}
</style>
